<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/pintuer.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/leader.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <script src="<%=request.getContextPath()%>/js/jquery.js"></script>
    <script src="<%=request.getContextPath()%>/js/pintuer.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function actiConfirm() {
            $("#listform").submit();
        }

        function kickOutConfirm(id) {
            if(!confirm("确定要将该志愿者从此活动移除吗?")) {
                return;
            }
            location.href = "activity_kick_out/" + id;
        }

        $().ready(function() {
            var nowID = '${selectedActivityId}';
            if (nowID != '0' && nowID != '' && nowID != null) {
                document.getElementById("activity_id_selector").value = nowID;
            }
        });
    </script>
</head>
<body>
<form method="post" action="activity_select" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder">活动签到管理</strong><a href="" style="float:right; display:none;">添加字段</a></div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
                <li>选择活动</li>

                <li>
                    <select name="activity_id" id="activity_id_selector" class="input" style="width:250px; line-height:17px;display:inline-block">
                        <c:forEach var="item" items="${activitiesList}" >
                            <option value="${item.id}">${item.title}</option>
                        </c:forEach>
                    </select>
                    <a href="javascript:void(0)" class="button border-main icon-search" onclick="actiConfirm()" > 确认</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <tr>
                <th>ID</th>
                <th>志愿者编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>电话号码</th>
                <th>电子邮箱</th>
                <th>专业和班级</th>
                <th>签到状态</th>
                <th>操作</th>
            </tr>
            <%--使用JSTL标签库的迭代标签输出userlist集合的元素--%>
            <c:forEach var="item" varStatus="looper" items="${userList}" >

            <tr>
                <td>${item.id}</td>
                <td>${item.volId}</td>
                <td>${item.name}</td>
                <td>${item.sex}</td>
                <td>${item.phone}</td>
                <td>${item.email}</td>
                <td>${item.majorclass}</td>
                <td>${notesCheckOutStatusList[looper.count-1]}</td>
                <td>
                    <div class="button-group">
                        <c:if test="${notesCheckOutStatusList[looper.count-1] == '未签到'}">
                            <a class="button border-main" href="activity_checkout/${notesIdList[looper.count-1]}"><span class="icon-trash-o"></span>帮助签到</a>
                        </c:if>
                        <a class="button border-red" href="javascript:void(0)" onclick="kickOutConfirm('${notesIdList[looper.count-1]}')"><span class="icon-times"></span>移除</a>
                    </div>
                </td>
            </tr>
            </c:forEach>
        </table>
        <!--分页-->
        <%-- <div class="pagelist">
         <a href="">上一页</a> <span class="current">1</span>
         <a href="">2</a>
         <a href="">3</a><a href="">下一页</a><a href="">尾页</a> </div> --%>
    </div>
    <c:if test="${selectedActivityId==''}">
        <div class="alert alert-info" role="alert" style="margin: 15px;">
            <p class="text-center">请选择活动以查看名单</p>
        </div>
    </c:if>
    <c:if test="${selectedActivityId!='' and userList.size()==0}">
        <div class="alert alert-info" role="alert" style="margin: 15px;">
            <p class="text-center">暂无志愿者参与此活动</p>
        </div>
    </c:if>

</form>
</body>
</html>